<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <header>
            <h1>番茄时钟</h1>
        </header>
        <main>
            <section id="timer">
                <div id="time-display">25:00</div>
                <button id="start-pause">开始</button>
                <button id="reset">重置</button>
            </section>
            <section id="session-management">
                <div>完成的番茄钟轮数: <span id="session-count">0</span></div>
                <button id="long-break">长休息</button>
                <button id="short-break">短休息</button>
            </section>
            <section id="settings">
                <label for="long-break-duration">长休息时间（分钟）：</label>
                <input type="number" id="long-break-duration" value="15" min="1" max="30">
                <label for="short-break-duration">短休息时间（分钟）：</label>
                <input type="number" id="short-break-duration" value="5" min="1" max="30">
            </section>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html> 